<template>
  <div>
    <data-card bordered hoverable>
      <search-form :disabled="loading" label-width="70px" @search="getRequestData({page:1,size:pagination.size})">
        <template #default>
          <el-form-item label="操作IP" path="user.name">
            <el-input clearable v-model="where.ip" placeholder="登录IP地址"/>
          </el-form-item>
          <el-form-item label="浏览器" path="user.browser">
            <el-input clearable v-model="where.browser" placeholder="登录浏览器"/>
          </el-form-item>
        </template>
        <template #more>
          <el-form-item label="操作系统" path="os">
            <el-input v-model="where.os" placeholder="登录电脑系统"/>
          </el-form-item>
          <el-form-item label="登录时间" path="time">
            <date-range clearable v-model="where.time"/>
          </el-form-item>
        </template>
      </search-form>
    </data-card>
    <data-card class="app-margin-top-interval" bordered hoverable>
      <app-table height="calc(var(--ach) - 180px)" :columns :pagination :loading :data="list" @reload="getRequestData">
        <template #status="{ row }">
          <el-link type="success" v-if="row.status">成功</el-link>
          <el-link type="danger" v-else>失败</el-link>
        </template>
      </app-table>
    </data-card>
  </div>
</template>
<script lang="ts" setup>
import {getLogListApi} from "@/apps/admin/api/console";
import {useHttpPagingResult} from "@/hooks/http";
import {reactive} from "vue"
import {TableColumn} from "@/components/AppTable/TableType";

const where = reactive({
  ip: '',
  browser: '',
  os: '',
  time:[]
})

/**
 * 引入hooks
 */
const {pagination, list, loading, getRequestData} = useHttpPagingResult(function (query) {
  return getLogListApi({...query, ...where});
})


const columns: Array<TableColumn> = [
  {label: "id", prop: "id", width: 100},
  {label: "行为", prop: "name", minWidth: 250},
  {label: "系统", prop: "os", minWidth: 120},
  {label: "浏览器", prop: "browser", minWidth: 120},
  {label: "IP", prop: "ip", minWidth: 150},
  {label: "IP属地", prop: "ascription", minWidth: 200},
  {label: "接口地址", prop: "url", showOverflowTooltip: true, minWidth: 300},
  {label: "状态", prop: "status", minWidth: 120},
  {label: "时间", prop: "time", type: "timestramp", width: 165},
]
</script>